JavaScript
──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
top
JavaScript est un langage de programmation de scripts principalement
employé dans les pages web interactives et à ce titre est une partie
JavaScript est au cœur des langages utilisés par les
développeurs webcite-ref-4[4]. Une grande majorité des sites web l'utilisentcite-ref-deployedstats-5-0[5] et
l'interpréter.
JavaScript est aussi employé pour les serveurs Webcite-ref-7[7] avec l'utilisation
JavaScript a été créé en 1995 par Brendan Eich et intégré au
navigateur web Netscape Navigator 2.0. L'implémentation concurrente de
JavaScript par Microsoft dans Internet Explorer, jusqu'Ă sa version 9,
se nommait JScript, tandis que celle d'Adobe Systems se nommait
ActionScript. JavaScript a été standardisé sous le nom d'ECMAScript en
juin 1997 par Ecma International dans le standard ECMA-262. La version
en vigueur de ce standard depuis juin 2022 est la 13e Ă©dition.
C'est un langage orienté objet à prototype : les bases du langage et ses
principales interfaces sont fournies par des objets. Cependant, Ă la
différence d'un langage orienté objets à classes, les objets de base ne
JavaScript est le langage possédant le plus large écosystème grâce à son
gestionnaire de dépendances npm, avec plus de deux millions de paquets
en septembre 2022cite-ref-10[10].
Contents
• Histoire
• Début
• Marque déposée
• Standardisation
• Sécurité
• Hello world
• Utilisation
• Prototypes
• Annexes
• Liens externes
──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
Histoire
DĂ©but
Le langage a été créé en dix jours, en mai 1995, pour le compte de la
Netscape Communications Corporation par Brendan Eich. Il s'est inspiré
les débutantscite-ref-11[11]. Brendan Eich a initialement développé un langage de
script côté serveur, appelé LiveScript, pour renforcer l'offre
commerciale de serveur HTTP. Netscape travaille alors au développement
d'une version orientée client de LiveScript.
Quelques jours avant sa sortie, Netscape change le nom de LiveScript
pour JavaScript. Sun Microsystems et Netscape Ă©taient partenaires, et la
machine virtuelle Java de plus en plus populaire. Ce changement de nom
servait les intérêts des deux sociétés. Le 4 décembre 1995 Netscape et
Sun Microsystems annoncentcite-ref-newsrelease67-12-0[12] la sortie de JavaScript, décrit comme un
complément à Java, dans un communiqué de presse commun. Cette initiative
a contribué à créer auprès du public une certaine confusion entre les
deux langages, proches syntaxiquement mais pas du tout dans leurs
concepts fondamentaux, et qui perdure encore de nos jours.
En mars 1996, Netscape met en Ĺ“uvre le moteur JavaScript dans son
navigateur web Netscape Navigator 2.0. Le succès de ce navigateur
contribue à l'adoption rapide de JavaScript dans le développement web
inclut ensuite dans Internet Explorer 3.0 en août 1996 pour la sortie de
son navigateur.
« JavaScript » devient une marque déposée par Sun Microsystems aux
Marque déposée
"JavaScript" est une marque déposée d'Oracle Corporation aux
Sun Microsystems le 6 mai 1997, puis transférée à Oracle lors de leur
Standardisation
Version 1 : Naissance du standard ECMA-262
Les travaux débutent en novembre 1996 et se terminent en juin 1997,
donnant naissance à la 1re édition du standard ECMA-262 qui spécifie le
langage ECMAScript d'où le fait que le n° ou l'année de la version est
souvent précédée par ECMAScript ou en abrégé ES. Le standard est ensuite
soumis à l'ISO/CEI et publié en avril 1998 en tant que standard
international ISO/CEI 16262.
Version 2 : Homogénéisation avec le standard ISO/CEI 16262
Des changements rédactionnels sont apportés au standard ECMA-262 pour le
conformer au standard international ISO/CEI 16262, aboutissant Ă la 2e
Ă©dition du standard ECMA-262 en juin 1998.
Version 3 : Améliorations et constitution du langage
La 3e Ă©dition du standard ECMA-262 introduit :
• des expressions rationnelles plus puissantes ;
• une amélioration de la manipulation des chaînes de caractères ;
• de nouvelles instructions de contrôle ;
• une gestion des exceptions avec les instructions try/catch ;
• le formatage des nombres.
Elle est publiĂ©e par Ecma International en dĂ©cembre 1999 puis soumise Ă
l'ISO/CEI qui publie le standard international ISO/CEI 16262:2002 en
juin 2002. Après la publication de la 3e édition s'ensuit une adoption
massive par tous les navigateurs Web.
Version 4 : L'étape inachevée
Un travail important est entrepris pour développer la 4e édition du
standard ECMA-262, mais il ne sera pas achevé et cette édition ne verra
jamais le jour. Cependant une partie du développement effectué sera
intégrée à la 6e édition.
Version 5 : Désambiguïsation et nouvelles fonctionnalités
La 5e édition du standard ECMA-262 clarifie les ambiguïtés de la 3e
Ă©dition et introduit les accesseurs, l'introspection, le contrĂ´le des
attributs, des fonctions de manipulation de tableaux supplémentaires, le
support du format JSON et un mode strict pour la vérification des
erreurs. Elle est publiée par Ecma International en décembre 2009 puis
soumise Ă l'ISO/CEI qui apporte des corrections mineures et publie le
standard international ISO/CEI 16262:2011 en juin 2011. L'Ă©dition 5.1 du
standard ECMA-262 reprenant Ă l'identique le texte du standard
international ISO/CEI 16262:2011 est publiée à la même date.
Version 6 (ES6) - ECMAScript 2015 : Amélioration du support et des fonctionnalités
Bien que le développement de la 6e édition du standard ECMA-262 ait
commencé officiellement en 2009, peu avant la publication de la 5e
édition, sa publication en juin 2015 est en réalité l'aboutissement de
15 ans de travail depuis la publication de la 3e Ă©dition en 1999. Le but
de cette 6e Ă©dition est d'apporter un meilleur support pour les
applications d'envergure, la création de bibliothèques et l'utilisation
d'ECMAScript comme cible de compilation pour d'autres langages. Cette
édition introduit notamment les modules, les classes, la portée lexicale
au niveau des blocs, les itérateurs et les générateurs, les promesses
pour la programmation asynchrone, les patrons de déstructuration,
l'optimisation des appels terminaux, de nouvelles structures de données
(tableaux associatifs, ensembles, tableaux binaires), le support de
caractères Unicode supplémentaires dans les chaînes de caractères et les
expressions rationnelles et la possibilité d'étendre les structures de
données prédéfinies. À partir de cette version, l'intitulé officiel de
la version est ECMAScript 2015 (année de parution)cite-ref-20[20].
Version 7 - ECMAScript 2016 : une adaptation permanente aux outils du web
La 7e édition du standard ECMA-262 est la première édition issue du
nouveau processus de développement ouvert et du rythme de publication
annuel adoptés par le comité Ecma TC39. Un document au format texte est
créé à partir de la 6e édition et est mis en ligne sur GitHub comme base
de développement pour cette nouvelle édition. Après la correction de
milliers de bugs et d'erreurs rédactionnelles ainsi que l'introduction
de l'opérateur d'exponentiation et d'une nouvelle méthode pour les
prototypes de tableaux, la 7e édition est publiée en juin 2016.
Version 8 (ES8) - ECMAScript 2017: Asynchronicité
L'apport majeur concerne les fonctions asynchrones.
On retrouve Ă©galement :
• Le partage de mémoire entre différents fil d'exécution et workers
(Shared memory and atomics)
• Les fonctions Object.values() et Object.entries() qui permettent de
faciliter la manipulation des objets.
L'édition actuelle du standard ECMA-262 est la 13e édition publiée en
juin 2022cite-ref-21[21].
Sécurité
failles de sécurité. En effet, des scripts malveillants peuvent se
cacher dans le code d'une page web et s'exécuter sur l'ordinateur cible
de l'utilisateur du Web.
Les problèmes de sécurité étaient souvent présents avec ActiveX, une
fonctionnalité du navigateur maintenant obsolète Internet Explorer.
Cette fonctionnalité permettait l'exécution de programmes malveillants
sur l'ordinateur de la victime, en dehors du navigateur. Aujourd'hui,
l'environnement javascript est plus sécurisé.
Les fournisseurs de navigateurs web tentent de réduire ce risque avec
deux restrictions :
• l'une est de faire exécuter ces scripts dans un espace à part des
autres données (sandbox) dans lequel seules des actions relatives au web
(mouvements de souris, affichage de pixel, communications) peuvent ĂŞtre
exécutées, sans avoir accès au système de fichier principal ;
• la deuxième est de n'exécuter les scripts que selon les contraintes de
same-origin policy : dans cet esprit, un site Web ne doit pas avoir
accès aux informations telles que les noms d'utilisateur et mot de passe
ou cookies reçus des autres sites visités.
Les vulnérabilités de JavaScript sont bien souvent des brèches d'au
moins l'un de ces deux principes.
Certains sous-ensembles du langage Javascript tels que JavaScript—ADsafe
ou Secure ECMAScript (SES) fournissent de plus grands niveaux de
sécurité, en particulier pour les scripts créés par des tierces parties
inclure et isoler de manière sécurisée du JavaScript et du HTML tierce
partie.
La Politique de sĂ©curitĂ© du contenu est la principale mĂ©thode destinĂ©e Ă
assurer que seul un script de confiance est exécuté sur une page Web.
Meltdown est une vulnérabilité indépendante de Javascript, qui peut
notamment être exploitée en Javascript.
Concepts de programmation
Le propos de JavaScript est de manipuler de façon simple des objets, au
sens informatique, fournis par une application hĂ´te. Par exemple dans un
navigateur web, un script écrit en javascript peut être utilisé pour
apporter une touche interactive ou dynamique Ă un applicatif (page ou
site web), qui sans cela serait une page statique figée. Le langage
Javascript permet par exemple d'Ă©crire des scripts pour afficher ou
cacher un paragraphe, une image ou un popup, selon les interactions de
l'utilisateur, ou d'informer le serveur du temps passé à lire une page.
Hello world
Il est possible dans un script en langage Javascript, d'afficher le
texte hello world sur la console de debug de l’application. Ceci peut
être utilisé par des développeurs en phase de mise au pointcite-ref-24[24]. :
window.console.log('Hello world'); window.console.exp(hello world)
// ou
global.console.log('Hello world'); window.console.log(hello world)
Dans une application hôte d'un navigateur, console est une des méthodes
de l'objet global windowcite-ref-25[25]. Dans d'autres applications hĂ´tes comme
étant accessibles sans préfixe, window et global sont facultatifs.
La syntaxe
console.log('Hello world');
aura donc exactement le même résultat en plus d'être compatible sur tous
les environnements.
Utilisation
Le code JavaScript a besoin d'un objet global pour y rattacher les
La situation la plus connue est celle de l'objet window obtenu dans le
contexte d'une page web. D'autres environnements sont possibles dont
utilisations).
Les principaux domaines d'application de JavaScript sont avant tout la
programmation, les activités de programmation de base et tout ce qui est
lié à l'informatique.
Dans une page web
Du code JavaScript peut être intégré directement au sein des pages web,
pour y être exécuté sur le poste client. C'est alors le navigateur web
qui prend en charge l'exécution de ces programmes appelés scripts.
Généralement, JavaScript sert à contrôler les données saisies dans des
formulaires HTML, ou Ă interagir avec le document HTML via l'interface
Document Object Model, fournie par le navigateur (on parle alors parfois
de HTML dynamique ou DHTML). Il est aussi utilisé pour réaliser des
applications dynamiques, des transitions, des animations ou manipuler
des données réactives, à des fins ergonomiques ou cosmétiques.
JavaScript n'est pas limité à la manipulation de documents HTML et peut
Intégration
Il existe plusieurs façons d’intégrer JavaScript dans du code html:
• Dans des attributs d’évènements html : <button onclick="alert('clic
!')">clic ici</button>. Le code JavaScript alert('clic !')sera exécuté
quand le bouton sera cliqué.
• Dans des balises <script> : <script>//ici on peut mettre du code
JavaScript</script>
• Dans des fichiers externes : <script
src="chemin/ver/mon/fichier.js"></script>
Incompatibilité
Netscape et Microsoft (avec JScript dans Internet Explorer jusqu'Ă la
version 9) ont développé leur propre variante de ce langage qui chacune
supporte presque intégralement la norme ECMAScript mais possède des
fonctionnalités supplémentaires et incompatibles, rarement utilisées
dans le cadre de la programmation de pages web. Pourtant les scripts
JavaScript sont souvent la source de difficultés. Elles sont plus
souvent dues à la prise en charge des différentes versions des modèles
d'objets (DOM) fournis par les navigateurs, qu'à des problèmes de
portabilité du langage (les différentes mises en œuvre respectant
relativement bien la norme ECMAScript).
Pour vérifier dynamiquement si un objet (dans la version JavaScript
utilisée lors de l'interprétation) possède bien une méthode, on utilise
souvent une construction du type :
if (monObjet.methode && typeof monObjet.methode === 'function') {
monObjet.methode();
}
On vérifie ainsi que monObjet a bien une mise en œuvre de methode que
l'on peut alors utiliser. Le plus souvent, si un navigateur ne gère pas
la methode de monObjet, il gère une méthode comparable methode2, et on
peut alors adapter le code JavaScript au navigateur qui l'exécute :
if (typeof monObjet.methode === 'function') {
monObjet.methode();
} else if (typeof monObjet.methode2 === 'function') {
monObjet.methode2();
}
Une autre méthode consiste à vérifier, côté serveur, le navigateur
utilisé par le client et d'envoyer le code correspondant. Cela n'est
toutefois pas recommandable, car il est largement préférable de tester
directement l'existence, le comportement d'une fonction, d'une
propriété, etc. plutôt que de faire des présomptions basées sur la
détection du navigateur.
Ajax
Ajax (de l'anglais Asynchronous JavaScript And XML) est un ensemble de
techniques découplant l'échange de données entre le navigateur et le
serveur web de l'affichage d'une page web, ce qui permet de modifier le
contenu des pages web sans les recharger. Grâce à l'objet JavaScript
XMLHTTPRequest, cette méthode permet d'effectuer des requêtes HTTP sur
le serveur web depuis le navigateur web, et permet Ă©galement de traiter
les réponses HTTP du serveur web pour modifier le contenu de la page
web. La rĂ©ponse Ă©tait en gĂ©nĂ©ral au format XML qui tend aujourd'hui Ă
être remplacé par le format JSON qui a l'avantage d'être natif en
JavaScript. Le script manipule l'ensemble d'objets DOM qui représente le
été ajoutées aux navigateurs web entre 1995 et 2005. La méthode Ajax
permet de réaliser des applications Internet riches, offrant une
maniabilité et un confort supérieur ; c'est un des sujets phares du
mouvement Web 2.0.
JSON
JSON (JavaScript Object Notation) est un format utilisant la notation
des objets JavaScript pour transmettre de l'information structurée,
d'une façon plus compacte et plus proche des langages de programmation,
que XML.
Malgré l'existence du DOM et l'introduction récente de E4X (voir
ci-dessous) dans la spécification du langage JavaScript, JSON reste le
moyen le plus simple d'accéder à des données, puisque chaque flux JSON
n'est rien d'autre qu'un objet JavaScript sérialisé. De plus, malgré son
lien historique (et technique) avec JavaScript, JSON reste un
format de données structurées, et peut être utilisé facilement par tous
les langages de programmation.
Depuis 2009, les navigateurs commencent à intégrer un support natif du
format JSON, ce qui facilite sa manipulation, la sécurité (contre
l'Ă©valuation de scripts malveillants inclus dans une chaine JSON), et la
l'intègrent respectivement dès les versions 3.5 et 8.
Exemple de JSON :
{
"clef1": "valeur",
"clef2": 12345,
"clef3": true,
"clef4": {
"clef5": "valeur"
}
}
La structure est organisée par clef/valeurs. Les clefs doivent être
entre guillemets doubles. Les valeurs peuvent ĂŞtre :
• une string (chaîne de caractères entre guillemets doubles)
• un nombre
• un booléen (true ou false pour vrai ou faux)
• une structure clef/valeur
Un JSON valide ne peut pas comporter de commentaires. Il existe des
validateurs de JSON en ligne.
Autres utilisations
Dans la barre d’adresse d’un navigateur
Taper des adresses comme javascript: ducodejavascript provoque
l’exécution de ducodejavascript. Exemple: javascript:
alert(document.cookie) provoque l’affichage des cookies de la page.
Sur un serveur web
JavaScript peut également être utilisé comme langage de programmation
D'ailleurs le projet CommonJS travaille dans le but de spécifier un
écosystème pour JavaScript en dehors du navigateur (par exemple sur le
serveur ou pour les applications de bureau natives). Le projet a été
lancé par Kevin Dangoor en janvier 2009. Le projet CommonJS n'est pas
affilié avec le groupe de l'Ecma International TC39 travaillant sur
ECMAScript, mais certains membres du TC39 participent au projet.
Historiquement, JavaScript était proposé sur les serveurs de Netscape,
par la suite distribués par Sun Microsystems sous les noms iPlanet et
Sun ONE, mais JScript peut aussi être utilisé sur les serveurs
servir pour scripter une plate-forme Microsoft Windows via
Windows Scripting Host (WSH).
Il existe par ailleurs des projets indépendants et Open Source
d'implémentation de serveurs en JavaScript. Parmi eux, on pourra
distinguer Node.js, une plateforme polyvalente de développement
d'applications réseau se basant sur le moteur JavaScript V8 et les
spécifications CommonJS.
Autres supports
ActionScript, utilisé dans Adobe Flash, est aussi une mise en œuvre
d'ECMAScript. Il permet de manipuler tous les éléments de l'animation,
considérés comme des objets. JavaScript peut être utilisé pour scripter
d'avoir des scripts indépendants de la plate-forme (Microsoft Windows,
Apple OSX, Linux…).
JavaScript est enfin utilisé dans la plate-forme de développement de
Mozilla, sur laquelle sont basés plusieurs logiciels comme des
navigateurs Web, pour des tâches relatives à l'interface utilisateur et
Ă la communication interne (ex. : les extensions de Firefox et
Thunderbird sont installées à base de fichiers XPI utilisant le
JavaScript. Voir aussi Prefs.js).
Depuis 2004, l'objet js de l'environnement de programmation graphique
Max/MSP permet d'ouvrir une fenĂŞtre pour programmer en JavaScript, au
sein mĂŞme d'un programme Max/MSP.
leur permettent d'Ă©crire des scripts dans un contexte graphique. Algobox
utilise JavaScript pour la syntaxe de ses fonctions. H5P se sert de
HTML5 et Javascript pour faciliter la création de contenus interactifs
en ligne.
JavaScript est aussi utilisé dans un contenu BIFS pour l'exploitation
des événements. Pour cela la spécification BIFS fournit un nœud Script
pour incorporer de l'ECMAScript.
La suite bureautique OpenOffice.org permet d'utiliser JavaScript comme
langage de macros.
Le format graphique vectoriel SVG incorpore le langage ECMAscript pour
créer des graphiques interactifs directement exploitable dans un
navigateur.
Enfin, JavaScript est également utilisé pour dynamiser le QML de la
bibliothèque graphique Qt.
Particularités du langage
Liaison des identifiants
En JavaScript, toutes les expressions (identifiants, littéraux et
opérateurs et leurs opérandes) sont de type référence (comme en Python
possèdent aussi des expressions de type valeur), c'est-à -dire que leur
évaluation ne produit pas une donnée directement mais une référence vers
une donnée. La référence se nomme le référent de l’expression et la
donnée le référé de l’expression.
En JavaScript, l'affectation d'une variable modifie son référent,
autrement dit, elle lie la variable à une autre donnée : on parle de
changement de liaison de la variable (en anglais variable rebinding).
var maVariable1 = 0; // lie `maVariable1` à une donnée de valeur 0
var maVariable2 = maVariable1; // lie `maVariable2` Ă la donnĂ©e liĂ©e Ă
`maVariable1`
maVariable1++; // Ă©quivalent Ă `maVariable1 = maVariable1 + 1;`, relie
`maVariable1` à une nouvelle donnée de valeur maVariable1 + 1
(affectation) juin
alert(maVariable1); // affiche 1
alert(maVariable2); // affiche 0
var maVariable3 = [1, 2, 3]; // lie `maVariable3` à une donnée de
valeur [1, 2, 3]
var maVariable4 = maVariable3; // lie `maVariable4` Ă la donnĂ©e liĂ©e Ă
`maVariable3`
maVariable3 = [4, 5, 6]; // relie `maVariable3` à une nouvelle donnée
de valeur [4, 5, 6] (affectation)
alert(maVariable3); // affiche [4, 5, 6]
alert(maVariable4); // affiche [1, 2, 3]
var maVariable5 = [1, 2, 3]; // lie `maVariable5` à une donnée de
valeur [1, 2, 3]
var maVariable6 = maVariable5; // lie `maVariable6` Ă la donnĂ©e liĂ©e Ă
`maVariable5`
maVariable5.push(4); // modifie la donnée liée à `maVariable5` et
`maVariable6`
alert(maVariable5); // affiche [1, 2, 3, 4]
alert(maVariable6); // affiche [1, 2, 3, 4]
Portée lexicale des variables
La portée lexicale d'une variable est la partie d'un programme où la
liaison entre son identifiant et sa donnée est valide. En JavaScript, la
portée lexicale d'une variable peut être de deux types, selon le mot-clé
utilisé pour la déclarer :
• var : au niveau de la fonction (ou de l'espace global) où elle est
• let ou const (introduits dans ECMAScript 6) : au niveau du bloc où
particulier.
Depuis le support de let par les navigateurs modernes, var ne doit plus
être utilisé et son utilisation est considéré comme une mauvaise
pratiquecite-ref-29[29].
// 1. DĂ©claration dans un bloc
if (true) { // début du bloc
var maVariable1; // déclaration de la variable
let maVariable2; // déclaration de la variable
const maVariable3; // déclaration de la variable
} // fin du bloc mais pas de la portée de maVariable1
alert(maVariable1); // ne soulève pas d'erreur
alert(maVariable2); // erreur : la variable est hors de sa portée
alert(maVariable3); // erreur : la variable est hors de sa portée
// 2. DĂ©claration dans une fonction
function maFunction() { // début de la fonction
var maVariable4; // déclaration de la variable
let maVariable5; // déclaration de la variable
const maVariable6; // déclaration de la variable
} // fin de la fonction et de la portée des variables
alert(maVariable4); // erreur : la variable est hors de sa portée
alert(maVariable5); // erreur : la variable est hors de sa portée
alert(maVariable6); // erreur : la variable est hors de sa portée
Une variable peut être affectée ou masquée par une fonction enfant de la
fonction (ou de l'espace global) où elle est déclarée :
var maVariable1 = 0; // définition de la variable parente
// 1. Affectation
function maFonction1() { // fonction enfant
maVariable1 = 1; // affectation de la variable parente
}
alert(maVariable1); // affiche 0
maFonction1(); // affecte la variable parente
alert(maVariable1); // affiche 1
// 2. Masquage
var maVariable2 = 0; // définition de la variable parente
function maFonction2() { // fonction enfant
var maVariable2; // déclaration de la variable enfant masquant la
variable parente
maVariable2 = 1; // affectation de la variable enfant
}
alert(maVariable2); // affiche 0
maFonction2();
alert(maVariable2); // affiche 0
DĂ©claration des variables
En JavaScript, quel que soit le lieu de la déclaration d'une variable
dans sa portée lexicale, la variable est créée au début de l'évaluation
de sa portée lexicale.
Les variables déclarées avec le mot-clé var sont en plus
pré-initialisées à la valeur undefined lors de leur création, et donc
accessibles dès le début de leur portée lexicale. On parle de remontée
de la variable (variable hoisting en anglais) car cela se passe comme si
la déclaration de la variable était remontée au début de sa portée
lexicale :
alert(maVariable); // affiche undefined
var maVariable = 0;
alert(maVariable); // affiche 0
Les variables déclarées avec le mot-clé let ou const (ECMAScript 6) ne
sont pas pré-initialisées, et donc inaccessibles avant leur déclaration.
Si une variable déclarée avec le mot-clé let ne possède pas
d'initialiseur, elle est initialisée à la valeur undefined lors de
l'évaluation de la déclaration, sinon elle est initialisée avec
l'initialiseur lors de l'évaluation de la déclaration. Si une variable
déclarée avec le mot-clé const ne possède pas d'initialiseur, une erreur
est levée lors de l'évaluation de la déclaration, sinon elle est
initialisée avec l'initialiseur lors de l'évaluation de la déclaration :
// 1. Avec initialiseur
alert(maVariable1); // erreur : accès impossible avant l'initialisation
alert(maVariable2); // erreur : accès impossible avant l'initialisation
let maVariable1 = 5;
const maVariable2 = 8;
alert(maVariable1); // affiche 5
alert(maVariable2); // affiche 8
// 2. Sans initialiseur
alert(maVariable3); // erreur : accès impossible avant l'initialisation
alert(maVariable4); // erreur : accès impossible avant l'initialisation
let maVariable3;
const maVariable4; // erreur : initialisation manquante
alert(maVariable3); // affiche undefined
alert(maVariable4); // erreur : initialisation manquante
De plus, JavaScript autorise la redéclaration de la même variable dans
sa portée lexicale, mais uniquement avec le mot-clé var :
var maVariable = 2;
var maVariable = 9;
Variables globales
En JavaScript, il existe plusieurs façons de déclarer une variable
globale, et certaines interagissent avec l'objet global (nommé window
dans les navigateurs) :
var maVariable1 = 0; // propriété ou méthode de l'objet global qui ne
peut pas être détruite par l'opérateur delete
let maVariable2 = 0; // pas une propriété ou méthode de l'objet global
const maVariable3 = 0; // pas une propriété ou méthode de l'objet global
maVariable4 = 0; // propriété ou méthode de l'objet global qui peut être
détruite par l'opérateur delete
window.maVariable5 = 0; // propriété ou méthode de l'objet global qui
peut être détruite par l'opérateur delete
this.maVariable6 = 0; // propriété ou méthode de l'objet global qui peut
être détruite par l'opérateur delete
Une variable initialisée sans déclaration est traitée comme une
function maFonction() {
maVariable = 5;
}
maFonction();
alert(maVariable); // affiche 5
Fonctions anonymes
Les fonctions anonymes sont, comme leur nom l'indique, des fonctions qui
ne portent pas de nom :
setTimeout(function () {
alert('Trois secondes se sont écoulées.');
}, 3000);
Celle-ci est donnée en paramètre à la fonction setTimeout, qui permet de
définir une durée avant d'afficher le message.
Fermetures lexicales
Un environnement lexical est l'ensemble des variables valides dans une
partie du programme. Il est composé de l'environnement lexical interne
(les variables locales) et d'une référence à l'environnement lexical
externe (les variables non locales).
Une fermeture lexicale (lexical closure en anglais) est une fonction
accompagnée de son environnement lexical externe, c'est-à -dire de
l'ensemble des variables non locales qu'elle a capturé, soit par valeur
(conservation d'une copie de chaque donnée liée aux variables non
locales), soit par référence (conservation d'une référence à chaque
donnée liée aux variables non locales). Comme en JavaScript toutes les
variables sont de type référence (cf. la section
Liaison des identifiants), JavaScript n'utilise que la capture par
référence — ce qui correspond en C++ 11 à la syntaxe [&](…) { … }; —, et
la durée de vie des variables non locales capturées par une fonction est
étendue à la durée de vie de la fonction — ce qui n'est pas le cas en
C++ 11, quel que soit le type de capture :
function maFonction() {
var maVariable = 4; // variable parente
return function () {
alert(maVariable);
}
}
var maFermeture = maFonction(); // capture de la variable parente par
référence
maFermeture(); // affiche 4
Expressions de fonctions immédiatement invoquées
Jusqu'à ECMAScript 6, JavaScript ne proposait pas nativement de portée
des variables au niveau des blocs (pas de mots-clé let ou const), ni de
modules. Pour éviter de polluer l'espace global, une méthode consistait
à encapsuler son code dans une fonction pour s'appuyer sur la portée des
variables qui a lieu au niveau des fonctions en JavaScript, puis Ă
invoquer cette fonction juste après. Pour regrouper les deux étapes
(définition de la fonction et invocation) et ne pas ajouter un nom de
fonction supplémentaire dans l'espace global, le langage permet les
expressions de fonctions immédiatement invoquées (EFII ; en anglais
immediately-invoked function expressions, IIFE)cite-ref-30[30].
Plusieurs syntaxes sont possibles pour ce type d'expression, les plus
répandues étant :
pour sa lisibilité)cite-ref-31[31] ;
• (function (…) { … })(…);
L'opérateur d'invocation de fonction () à la fin permet l'exécution
immĂ©diate de la fonction. Les parenthèses en gras indiquent Ă
l'analyseur syntaxique qu'elles contiennent une expression, car en
JavaScript les parenthèses ne peuvent pas contenir de déclaration.
Autrement, dans la plupart des situations, le mot clé function est
traité comme une déclaration de fonction, et pas comme une expression de
fonction. Il existe d'autres façons pour forcer une expression de
fonction :
• !function (…) { … }(…);
• ~function (…) { … }(…);
• -function (…) { … }(…);
• +function (…) { … }(…);
Dans les contextes oĂą une expression est attendue il n'est pas
nécessaire d'utiliser les parenthèses en gras :
• var maVariable = function (…) { … }(…);
• true && function (…) { … }(…);
• 0, function (…) { … }(…);
Une utilisation importante des expressions de fonctions immédiatement
invoquées est pour la création de modules. Les modules permettent à la
fois de rassembler des propriétés et des méthodes dans un espace de nom
et de rendre certains membres privés :
var compteur = (function () {
var i = 0; // propriété privée
return { // méthodes publiques
obtenir: function () {
alert(i);
},
mettre: function (valeur) {
i = valeur;
},
incrementer: function () {
alert(++i);
}
};
})(); // module
compteur.obtenir(); // affiche 0
compteur.mettre(6);
compteur.incrementer(); // affiche 7
compteur.incrementer(); // affiche 8
compteur.incrementer(); // affiche 9
Prototypes
Les prototypes sont des objets utilisés lors d'un échec de résolution de
nom. Ce mécanisme est un type d'héritage : l'héritage par prototype. En
JavaScript, tout objet possède un prototype, accessible via la méthode
Object.getPrototypeOf (ou via la propriété historique __proto__
standardisée dans ECMAScript 6 pour assurer la compatibilité entre les
navigateurs mais non recommandée). De plus, l'opérateur new permet de
transformer l'invocation d'une fonction constructeur en un objet
(instanciation) dont le prototype est égal à la propriété prototype de
la fonction constructeur :
function MonConstructeur() {
this.maPropriete1 = 3;
}
const monInstance = new MonConstructeur();
alert(monInstance.maPropriete1); // affiche 3
alert(Object.getPrototypeOf(monInstance) === MonConstructeur.prototype);
// affiche true
MonConstructeur.prototype.maPropriete2 = 5;
alert(monInstance.maPropriete2); // affiche 5
Toute instance de MonConstructeur (monInstance ici) possède un prototype
égal à MonConstructeur.prototype. Lors de l'utilisation d'une propriété
ou d'une méthode d'une instance de MonConstructeur
(monInstance.maPropriete1 et monInstance.maPropriete2 ici), si
l'instance ne possède pas la propriété ou la méthode recherchée, la
recherche se poursuit dans le prototype de l'instance
(MonConstructeur.prototype ici). Si la recherche Ă©choue aussi avec cet
objet, la recherche se poursuit dans le prototype de cet objet, et ainsi
de suite jusqu'à arriver à la première fonction constructeur. Si la
recherche échoue encore, cette première fonction constructeur étant une
fonction donc une instance de la fonction constructeur Function du
langage, la recherche se poursuit dans son prototype qui est Ă©gal Ă
Function.prototype. Si la recherche Ă©choue Ă nouveau, Function.prototype
Ă©tant un objet donc une instance de la fonction constructeur Object du
langage, la recherche se poursuit dans son prototype qui est Ă©gal Ă
Object.prototype. Si la recherche Ă©choue cette fois, comme le prototype
de Object.prototype est Ă©gal Ă null, la recherche s'arrĂŞte et JavaScript
génère une erreur de résolution de nom. Ce mécanisme de recherche
parcourt ce qu'on appelle la chaîne de prototypes.
Le code de l'opérateur instanceOf illustre bien ce mécanisme. A
instanceOf B (ou de manière équivalente : instanceOf.call(A, B)) renvoie
true si A est une instance de B, c'est-à -dire si B.prototype est trouvé
dans le chaîne de prototypes de A, et false sinon :
function instanceOf(f) {
let o = this;
while (o !== null) {
o = Object.getPrototypeOf(o);
if (o === f.prototype) {
return true;
}
}
return false;
}
Par ailleurs, la méthode Object.create introduite dans ECMAScript 5
permet d'Ă©viter d'utiliser directement les fonctions constructeurs,
leurs propriétés prototype et l'opérateur new, pour ne travailler
qu'avec des objets. L'utilisation de cette méthode simplifie grandement
la complexité du code et est donc recommandée. La méthode Object.create
est définie par
if (typeof Object.create !== 'function') {
Object.create = function (o) {
function F() {}
F.prototype = o;
return new F();
};
}
L'exemple précédent peut alors être réécrit
const MonObjet = {
function initialiser() {
this.maPropriete1 = 3;
}
}
const monInstance = Object.create(MonObjet);
monInstance.initialiser();
alert(monInstance.maPropriete1); // affiche 3
MonObjet.maPropriete2 = 5;
alert(monInstance.maPropriete2); // affiche 5
SĂ©paration des instructions
En C, chaque instruction se termine par un point-virgule. Cette pratique
a fait du point-virgule une obligation dans de nombreux langages
inspirés de la syntaxe du C.
JavaScript est plus souple, permettant Ă une fin de ligne de marquer
implicitement la fin d'une instruction. Le but est de faciliter l'usage
du langage aux personnes inexpérimentées en programmation informatique.
Mais cette souplesse introduit des effets inattenduscite-ref-32[32] :
return
true;
Le parseur comprend cela comme deux instructions :
return;
true;
Les expressions de fonctions immédiatement invoquées lorsque le
programmeur s'appuie sur les fins d'instruction implicites rencontrent
également ce genre de problème avec l'usage des parenthèses :
maVariable1 = maVariable2 + maVariable3
(function () {
// code
})()
est traité comme
maVariable1 = maVariable2 + maVariable3(function () { /* code */ })();
Les ouvrages de programmation avancés en JavaScript mettent en garde
contre les effets inattendus de la déduction automatique de fin
d'instruction et conseillent d'Ă©crire un point-virgule Ă la fin de
chaque instruction, ce qui n'empĂŞche pas les surprises lorsqu'on oublie
le point-virgule, d'autant plus quand la compression du code impose le
retrait des retours chariot.
Annexes
Articles connexes
Liens externes
• (en) Standard ECMA-262, ECMAScript 2016 Language Specification
• Mozilla Developer Center - JavaScript
• (en) Microsoft MSDN - JScript
• (en) Exemples d'utilisation avancée du langage JavaScript
• Open Directory - JavaScript
• JavaScript éloquent, Une introduction au langage de programmation
JavaScript et à la programmation en général.
• (en) JSFiddle pour tester vos codes
• JavaScript obfuscator
• Javascript Deobfuscator
Notes et références
cite-note-wikidata-fdaa92a1fc5308e94e5ed782a2024ab0bbc4c072-11. « ECMAScript® 2024 Language Specification », juin 2024 (consulté le 30 août 2024)
cite-note-wikidata-6351048ad5638805e5935d8ba81b639a34072b65-22. « ECMAScript® 2025 Language Specification », 27 mars 2024 (consulté le 17 avril 2024)
cite-note-33. Douglas Crockford, dans une conférence à Yahoo! Crockford on JavaScript - Chapter 2: And Then There Was JavaScript, se limite à Java, Scheme et Self comme influence direct de JavaScript
cite-note-44. ↑ flanagandavid-flanaganDavid Flanagan, JavaScript : The definitive guide, 6e éd., p. 1 « JavaScript is part of the triad of technologies that all Web developers must learn: HTML to specify the content of web pages, CSS to specify the presentation of web pages, and JavaScript to specify the behaviour of web pages. »
cite-note-deployedstats-55. ↑ (en) « Usage Statistics of JavaScript for Websites, March 2018 », sur w3techs.com (consulté le 3 octobre 2018)
cite-note-66. ↑ (en) « An Introduction to JavaScript », sur javascript.info (consulté le 20 juillet 2020)
cite-note-77. ↑ (en) http://wiki.commonjs.org/wiki/CommonJS
cite-note-88. ↑ foundationnode-js-foundation(en) Node.js Foundation, « Node.js », sur Node.js (consulté le 5 août 2017)
cite-note-99. ↑ tungliam-tung(en) Liam Tung, « Deno 1.0: Node.js makers have new JavaScript runtime for TypeScript programming language », sur ZDNet (consulté le 20 juillet 2020)
cite-note-1010. ↑ « nodejs », sur nodejs.org (consulté le 5 mars 2024)
cite-note-1111. ↑ TechVision: Innovators of the Net: Brendan Eich and JavaScript
cite-note-newsrelease67-1212. ↑ (en) NETSCAPE AND SUN ANNOUNCE JAVASCRIPT, THE OPEN, CROSS-PLATFORM OBJECT SCRIPTING LANGUAGE FOR ENTERPRISE NETWORKS AND THE INTERNET
cite-note-1313. ↑ (en) « Trademark Status & Document Retrieval », sur tsdr.uspto.gov (consulté le 28 juin 2018)
cite-note-1414. ↑ « Sun Trademarks », 28 mai 2010 (version du 28 mai 2010 sur Internet Archive)
cite-note-1515. ↑ 1997« U.S. Trademark Serial No. 75026640 » [archive du 13 juillet 2021], sur uspto.gov, United States Patent and Trademark Office, 6 mai 1997 (consulté le 8 mai 2021)
cite-note-1616. ↑ « Notices Légales » [archive du 5 juin 2021], sur oracle.com, Oracle Corporation (consulté le 8 mai 2021)
cite-note-1717. ↑ 2009« Oracle rachète Sun pour 7,4 milliards de dollars », Les Échos, 21 avril 2009
cite-note-1818. ↑ canh2010tran-canh2010(en-US) Tran Canh, « cdnhub.io », sur Technologizer by Harry McCracken, 16 septembre 2010 (consulté le 10 avril 2024)
cite-note-1919. ↑ « The secret history behind the success of npm and Node », sur www.theserverside.com (consulté le 10 avril 2024)
cite-note-2020. ↑ [1]
cite-note-2121. ↑ « Standard ECMA-262 », sur www.ecma-international.org (consulté le 2 octobre 2019)
cite-note-2222. ↑ « Making JavaScript Safe for Advertising », ADsafe (consulté le 26 mai 2013)
cite-note-2323. ↑ « Secure ECMA Script (SES) », Code.google.com (consulté le 26 mai 2013)
cite-note-2424. ↑ « Why is console.log() considered better than alert()? », sur stackoverflow.com (consulté le 5 août 2017)
cite-note-2525. ↑ (en-US) « Window », sur Mozilla Developer Network (consulté le 5 août 2017)
cite-note-2626. ↑ (en) « Global Objects | Node.js v8.2.1 Documentation », sur nodejs.org (consulté le 5 août 2017)
cite-note-2727. ↑ (en) « IEBlog », sur msdn.com (consulté le 29 septembre 2020).
cite-note-2828. ↑ Voir Introduction au shell JavaScript
cite-note-2929. ↑ 2023(en-US) « Storing the information you need — Variables - Learn web development | MDN », sur developer.mozilla.org, 9 mai 2023 (consulté le 22 juin 2023)
cite-note-3030. ↑ alman2010ben-alman2010(en) Ben Alman, « Immediately-Invoked Function Expression (IIFE) », sur benalman.com, 15 novembre 2010 (consulté le 14 mai 2016)
cite-note-3131. ↑ crockforddouglas-crockford(en) Douglas Crockford, « Code Conventions for the JavaScript Programming Language », sur javascript.crockford.com (consulté le 14 mai 2016)
cite-note-3232. ↑ Cet exemple est donné page 25 par : JavaScript - The Definitive Guide, Fourth Edition, David Flanagan, éditions O'Reilly Media, Sebastopol, Californie.
• Portail de la programmation informatique